<template>
  <view class="">
    远程视频👇
    <video id="remoteVideo" :show-center-play-btn="false" :show-play-btn="false"
           :show-progress="false" :style="{height:playHeight+'px'}" style="width: 100%;"
           :muted="false" :autoplay="true"/>
    本机视频👇
    <video id="localVideo" :show-center-play-btn="false" :show-play-btn="false"
           :show-progress="false" :style="{height:playHeight+'px'}" style="width: 100%;"
           :muted="false" :autoplay="true"/>
    <view style="width: 100%">
      设备sn输入栏👇
      <view>
        <textarea style="background-color:black; color: #FFFFFF;height: 50rpx;width: 100%;" name="" id="" maxlength="-1"
                  v-model.trim="sn"></textarea>
      </view>
    </view>
    <view style="display: flex;align-items: center;justify-content: center;">
      <button class="block radius-btn" style="width: 300rpx" @tap="startTalk" type="operation"
              :disabled="false">开始对讲
      </button>
      <button class="block radius-btn" style="width: 300rpx" @tap="stopTalk" type="primary" :disabled="stopTalkButton">
        结束对讲
      </button>
    </view>
  </view>
</template>

<script>
import {twoWayVideoMixins} from "./mixins/twoWayVideoMixins";
import {twoWayVideoWebrtc} from "./mixins/twoWayVideoWebrtc";


export default {
  mixins:[twoWayVideoMixins,twoWayVideoWebrtc],
  data() {
    return {
      playHeight: '',

      // 	webrtc 相关
      startTalkButton: true,
      stopTalkButton: true,

    };
  },
  onLoad(options) {
  },
  onShow() {
    this.initWebRtc()
    this.getClineHeight()
  },
  methods: {
    startTalk() {
      this.getAdminTokenAndDeviceToken(()=>{
        this.setTalkEnable()
      })
    },
    stopTalk() {
      this.setTalkDisable()
    },
    getClineHeight() {
      uni.getSystemInfo({
        success: (res => {
          this.playHeight = res.windowHeight - 400
        })
      });
    },
  }
};
</script>
<style>
</style>